<template>
  <div id="EditCustomer">
    <h3>新增用户</h3>
    <el-form :model="customerData" label-width="200px" ref="form" style="width: 80%">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="customerData.username"></el-input>
      </el-form-item>
      <el-form-item label="密码(初始密码不可更改)" prop="userPassword">
        <el-input v-model="customerData.userPassword" readonly></el-input>
      </el-form-item>
      <el-form-item label="生日" prop="birth">
        <el-date-picker
          v-model="customerData.birth"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="角色">
        <el-select disabled v-model="customerData.roleId">
          <el-option :value="2" label="用户">用户</el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="城市" prop="city">
        <el-input v-model="customerData.city"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="commitEdit">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {updateUser} from "@/api/user";

export default {
  name: "EditCustomer",
  props:
    ['user'],
  data() {
    return {
      customerData: {
        username: '',
        userPassword: '123456',
        birth: '',
        city: '',
        roleId: 2
      },
      formRules: {
        username: [
          {required: true, message: '请输入活动名称', trigger: 'blur'}
        ],
        birth: [{required: true, message: '请输入活动名称', trigger: 'blur'}],
        city: [{required: true, message: '请输入活动名称', trigger: 'blur'}]
      }
    }
  },
  methods: {
    commitEdit() {
      this.$refs.form.validate(validate => {
        if (validate) {
          updateUser(this.customerData).then(res => {
            if (res.resultCode == 200) {
              this.$message.success('操作成功')
              this.$router.push('/admin/Customer/index')
            }
          })
        } else {
          return
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
#EditCustomer {
  margin: 10px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  h3{
    text-align: center;
  }
}

</style>
